<template>
  <div style="width: 100%">
    <div
      style="width: 100%;height:30px;display: flex;justify-content: flex-start;;align-items: center">
      <Input v-model="find_account" size="small" placeholder="请输入账号" style="width: 200px" @on-enter="findAccount"/>
      <span @click="refresh"><Icon type="refresh"
                                   style="font-size: 18px;margin-left: 5px;margin-top: 1px"></Icon></span>
    </div>
    <Table border :columns="user_columns" :data="user_data"></Table>
    <div style="float: right;margin-top: 15px;margin-bottom:15px">
      <Page :total=total_user @on-change="changePage"></Page>
    </div>
    <Back-top></Back-top>
  </div>
</template>
<script>
  import utils from '@/utils/utils'
  export default {
    data () {
      return {
        find_account: '',
        total_user: 0,
        user_columns: [
          {
            title: '账号',
            key: 'account'
          },
          {
            title: '昵称',
            key: 'nickname'
          },
          {
            title: '等级',
            key: 'level'
          },
          {
            title: '注册时间',
            key: 'register_time'
          },
          {
            title: '最后登录时间',
            key: 'update_time'
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                }, '查看'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ],
        user_data: []
      }
    },
    mounted(){
      this.getUserInfo()
    },
    methods: {
      findAccount(){
        this.$Message.success("功能暂未开放")
      },
      refresh (){
        this.user_data = []
        this.getUserInfo()
      },
      show (index) {
        this.$Modal.info({
          title: '用户信息',
          width: 530,
          content: `账号：${this.user_data[index].account}<br>
                    昵称：${this.user_data[index].nickname}<br>
                    等级：${this.user_data[index].level}<br>
                    注册时间：${this.user_data[index].register_time}<br>
                    最后登录时间：${this.user_data[index].update_time}<br>`
        })
      },
      remove (index) {
        this.$Modal.confirm({
          title: '提示',
          content: '<p style="font-size: 15px">确认删除该用户</p>',
          onOk: () => {
            this.axios.delete('user/' + this.user_data[index].id)
              .then((res) => {
                this.$Message.success('删除用户成功')
                this.user_data.splice(index, 1)
              })
          }
        })
      },
      changePage(index){
        /*this.user_data = []
         for (let i = 0; i < 10; i++) {
         this.user_data.push(
         {
         name: '周小伟' + i,
         age: 26,
         sex: '女' + index,
         address: '深圳市南山区深南大道'
         }
         )
         }*/
      },
      getUserInfo(){
        this.axios.get('/user', {
          limit: 5,
          offset: 2
        }).then((res) => {
          this.total_user = res.total
          let info = res.data
          for (let i = 0; i < info.length; i++) {
            let data = info[i]
            let user = {
              id: data.id,
              account: data.account === undefined ? '未获取到账号' : data.account,
              nickname: data.nickname === undefined ? '未获取到昵称' : data.nickname,
              level: data.level === undefined ? '未获取到角色等级' : data.level,
              register_time: data.register_time === undefined ? '未获取到注册时间' : utils.formatDate(data.register_time),
              update_time: data.update_time === undefined ? '该用户未登录' : utils.formatDate(data.update_time),
            }
            this.user_data.push(user)
          }
        })
      }
    }
  }
</script>
